<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :headers="headers"
      :action="url"
      accept=".xlsx, .xls"
      :limit="1"
      :file-list="fileList"
      :auto-upload="false"
      :on-change="onUploadChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取附件</el-button>
    </el-upload>
    <div style="text-align:center">
      <span slot="footer" class="dialog-footer">
        <el-button
          :disabled="isShow"
          size="small"
          type="success"
          :loading="uploadLoading"
          @click="submitUpload"
        >导 入</el-button>
        <el-button @click="closeDialog">关 闭</el-button>
      </span>
    </div>

    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :datakey="'records'"
      :dataSource="dataSource"
      height="auto"
      :isSelectColumn="isSelectColumn"
      :onColumnsChange="columns => this.columns = columns"
      columnsRef="cms-common_import_index_01"
    ></FilterTable>
  </div>
</template>

<script>
import { getToken, getUserId, getAppId } from '@/assets/js/auth';
export default {
  name: '',
  props: {
    //上传附件方法
    url: {
      type: String,
      required: true
    },
    //导出操作权限ID
    menuId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileList: [],
      columns: this.creatHeader(),
      dataSource: [],
      isSelectColumn: false,
      uploadLoading: false,
      isShow: false
    };
  },
  computed: {
    headers: function() {
      return {
        jwt: getToken(),
        appId: getAppId(),
        userAgent: 'pc',
        userId: getUserId(),
        menuId: this.menuId
      };
    }
  },
  methods: {
    //取消操作
    closeDialog(param) {
      this.$emit('close', false, param);
    },
    //导入
    submitUpload() {
      this.uploadLoading = true;
      this.$refs.upload.submit();
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: 'excel表格行号',
          dataIndex: 'rowNO'
        },
        {
          title: '信息(错误/数据无误)',
          dataIndex: 'errorMsg'
        }
      ];
    },
    //文件状态改变
    onUploadChange(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      console.log(testmsg);
      const extension = testmsg === 'xls';
      const extension2 = testmsg === 'xlsx';
      if (!extension && !extension2) {
        this.$notify.warning({ title: '提示信息', message: '上传文件只能是 xls、xlsx格式！' });
        this.isShow = true;
        return;
      }
      this.isShow = false;
      this.uploadLoading = false;
      let res = [];
      for (let j = 0; j < file.response.data.length; j++) {
        let o1 = { rowNO: file.response.data[j].rowNO };
        let o2 = { errorMsg: file.response.data[j].errorMsg == null ? '数据无误' : file.response.data[j].errorMsg };
        let a = Object.assign(o1, o2);
        res.push(a);
      }
      this.dataSource = res;
      let a = true;
      if (this.dataSource.length > 0) {
        for (let i = 0; i < this.dataSource.length; i++) {
          if (this.dataSource[i].errorMsg != '数据无误') {
            a = false;
          }
        }
      }
      if (a) {
        this.$notify.success({ title: '提示信息', message: '导入成功，数据已入库!' });
      } else {
        this.$notify.error({ title: '提示信息', message: '导入失败，请检查导入数据！' });
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>


